<template>
  <view class="reviews-section flex-col">
    <view class="reviews-header flex-row justify-between">
      <text class="section-title">用户评价</text>
      <view class="more-link flex-row justify-between">
        <text class="more-text">了解更多</text>
        <uni-icons type='forward' size="14" color="#999" />
      </view>
    </view>
    <!-- 用户评价列表 -->
    <scroll-view class="reviews-list" scroll-x="true" v-if="reviews && reviews.length > 0">
      <view class="reviews-scroll-container">
        <view class="review-card flex-col" v-for="(review, index) in reviews" :key="index">
          <view class="review-user-info flex-row">
            <image class="review-avatar" :src="review.avatar" mode="aspectFill" />
            <view class="review-comment">{{ review.comment }}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'UserReviews',
  props: {
    reviews: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>
.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

.reviews-section {
  background-color: #FFFFFF;
  border-radius: 24rpx;
  width: 686rpx;
  align-self: center;
  margin: 32rpx auto 0;
  padding: 32rpx;
}

.reviews-header {
  width: 100%;
  align-items: center;
  margin-bottom: 24rpx;
  padding: 0 4rpx;
  box-sizing: border-box;
}

.section-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

.more-link {
  align-items: center;
  display: flex;
  flex-direction: row;
}

.more-text {
  font-size: 24rpx;
  color: #999;
  margin-right: 8rpx;
}

/* 横向滚动部分的样式 */
.reviews-list {
  width: 100%;
  white-space: nowrap;
}

.reviews-scroll-container {
  display: inline-flex;
  padding: 12rpx 0;
}

.review-card {
  width: 538rpx;
  height: 182rpx;
  background: #F6F7F8;
  border-radius: 20rpx;
  margin-right: 24rpx;
}

.review-user-info {
  padding: 32rpx;
  align-items: center;
}

.review-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 16rpx;
}

.review-comment {
  font-weight: 400;
  font-size: 26rpx;
  color: #666666;
  width: 360rpx;
  word-wrap: break-word;
  white-space: normal;
  line-height: 36rpx;
}


</style>
